<template>
  <div class="wrap">
    <!-- 顶部栏 -->
    <div class="xq_top">
      <div class="xq_context_top">
        <div class="xq_context_top_left" @click="goback">
          <van-icon name="arrow-left" size=".52rem" color="#fff" />
        </div>
        <div class="xq_context_top_right" @click="collect">+ 关注</div>
      </div>
      <div class="xq_context_bottom">{{ detail.title }}</div>
    </div>

    <!-- 公司简介 -->
    <div class="xq_middle">
      <div class="xq_middle_top" :class="{ change: show }">
        <div class="box_img">
          <img :src="detail.logoUrl" alt="公司LOGO" />
        </div>
        <div class="box_context">
          <div class="box_context_top">
            <span>{{ detail.companyType }}</span> |
            <span>{{ detail.companyRange }}</span> |
            <span>{{ detail.companyNumber }}</span>
          </div>
          <div :class="{ change: show }">
            <div class="box_context_bottom" :class="{ 'text-ellipsis': !show }">
              {{ detail.description }}
            </div>
          </div>
          <div class="context_show" @click="showMore">
            {{ show ? "收起" : "查看更多" }}
          </div>
        </div>
      </div>
    </div>

    <!-- 公司详情 -->
    <div class="xq_bottom">
      <!-- 工作时间 -->
      <div class="xq_bottom_top">
        <div class="xq_bottom_top_tp">工作时间</div>
        <div class="xq_bottom_top_btm">
          <div
            class="item"
            v-for="(val, index) in detail.workTime || []"
            :key="index"
          >
            {{ val }}
          </div>
        </div>
      </div>

      <!-- 员工福利 -->
      <div class="xq_bottom_middle">
        <div class="xq_bottom_middle_top">员工福利</div>
        <template v-if="detail.welfare && detail.welfare.length">
          <div
            class="xq_bottom_middle_btm"
            v-for="(ele, index) in detail.welfare"
            :key="index"
          >
            <div class="item_left">
              <img :src="ele.img" alt="福利图标" />
            </div>
            <div class="item_right">
              <div class="item_right_top">{{ ele.title }}</div>
              <div class="item_right_bottom">{{ ele.descp }}</div>
            </div>
          </div>
        </template>
        <div v-else class="no-welfare">暂无福利信息</div>
      </div>

      <!-- 公司官网 -->
      <div class="xq_bottom_last">
        <div class="xq_bottom_last_top">公司官网</div>
        <div class="xq_bottom_last_btm">
          {{ detail.siteUrl || "暂无官网信息" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { showToast } from "vant";
import { useRouter, useRoute } from "vue-router";
import { getCompanyDetail } from "../../api/company";
import { addCompanyCollection } from "../../api/mine";

const router = useRouter();
const route = useRoute();
const id = ref(route.query.id || "");
const show = ref(false);
const detail = ref({});

const showMore = () => {
  show.value = !show.value;
};

const goback = () => {
  router.back();
};

const collect = async () => {
  let res = await addCompanyCollection({ companyid: id.value });
  console.log(res);
  showToast(res.message);
};

const getDetail = async () => {
  const res = await getCompanyDetail({ companyid: id.value });
  detail.value = res.data;
};

getDetail();
</script>

<style scoped lang="less">
.wrap {
  width: 100%;
  height: 100%;
  padding-bottom: 0.986rem;
}
.change {
  width: 100%;
  height: auto;
}
.xq_top {
  height: 2.5rem;
  width: 100%;
  background-color: #4aaa3f;

  .xq_context_top {
    height: 1.25rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.3125rem;
    box-sizing: border-box;
    position: fixed;
    z-index: 9999;
    background-color: #4aaa3f;

    .xq_context_top_right {
      color: #fff;
      font-size: 0.275rem;
      width: 1.233rem;
      height: 0.533rem;
      line-height: 0.533rem;
      text-align: center;
      border-radius: 0.33rem;
      border: 1px solid #fff;
      box-sizing: border-box;
      margin-right: 0.22rem;
    }
  }

  .xq_context_bottom {
    height: 1.25rem;
    width: 95%;
    color: #fff;
    font-size: 0.373rem;
    text-align: center;
    line-height: 1.65rem;
    float: right;
    margin-top: 1.25rem;
  }
}

.xq_middle {
  width: 100%;
  background-color: #fff;

  .xq_middle_top {
    width: 100%;
    height: 2.666rem;
    padding: 0 0.3125rem;
    box-sizing: border-box;
    position: relative;

    .box_img {
      width: 1.35rem;
      height: 1.35rem;
      border-radius: 25%;
      overflow: hidden;
      position: absolute;
      top: -0.8156rem;
      background-color: aqua;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .box_context {
      width: 75%;
      float: right;

      .box_context_top {
        font-size: 0.22rem;
        color: #333;
        line-height: 0.5rem;
        margin-top: 0.1rem;
      }

      .box_context_bottom {
        font-size: 0.24rem;
        color: #666;
        line-height: 0.35rem;
      }

      .context_show {
        font-size: 0.24rem;
        color: #4aaa3f;
        margin-top: 0.1rem;
        cursor: pointer;
        display: inline-block;
      }
    }
  }
}

.text-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xq_bottom {
  width: 100%;
  background-color: #fff;
  padding: 0 0.3125rem;
  box-sizing: border-box;

  .xq_bottom_top {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #efefef;

    .xq_bottom_top_tp {
      font-weight: 1000;
      font-size: 0.32rem;
      color: #333333;
    }

    .xq_bottom_top_btm {
      display: flex;
      flex-wrap: wrap;
      gap: 0.2rem;
      font-size: 0.24rem;
      color: #666666;
      margin-top: 0.1rem;

      .item {
        height: 0.4rem;
        line-height: 0.4rem;
        text-align: center;
        border-radius: 0.2rem;
        color: #333333;
      }
    }
  }

  .xq_bottom_middle {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #efefef;

    .xq_bottom_middle_top {
      font-weight: 1000;
      font-size: 0.32rem;
      color: #333333;
      margin-bottom: 0.25rem;
      margin-top: 0.4rem;
    }

    .xq_bottom_middle_btm {
      display: flex;
      align-items: center;
      font-size: 0.24rem;
      color: #666666;
      margin-bottom: 0.3rem;

      .item_left {
        width: 0.8rem;
        height: 0.8rem;
        overflow: hidden;
        margin-right: 0.1rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .item_right {
        width: 83%;
        font-size: 0.28rem;
        line-height: 0.35rem;

        .item_right_top {
          font-weight: 700;
          color: #666;
        }

        .item_right_bottom {
          font-weight: 100;
          color: #000;
          font-size: 0.22rem;
          margin-top: 0.2rem;
        }
      }
    }

    .no-welfare {
      font-size: 0.24rem;
      color: #999;
    }
  }

  .xq_bottom_last {
    padding-bottom: 0.35rem;

    .xq_bottom_last_top {
      font-weight: 1000;
      font-size: 0.32rem;
      color: #333333;
      margin-bottom: 0.25rem;
      margin-top: 0.4rem;
    }

    .xq_bottom_last_btm {
      font-size: 0.24rem;
      color: #666666;
    }
  }
}
</style>
